{% extends 'layout.html' %}

{% block css %}
    <style>

        .permission-area tr.root {
            background-color: #a6fdfd;;
        }

        .menu-body tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }

    </style>
{% endblock %}
{% block content %}
    <div style="margin-top: 20px">

        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-book"></i> 菜单管理
                    <a style="padding: 2px 7px;margin-top: -2px" href="{% url 'rbac:menu_add' %}"
                       class="btn btn-sm btn-success pull-right"> <i
                            class="fa fa-plus"></i> 添加</a>
                </div>

                <table class="table  table-hover">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>图标</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="menu-body">
                    {% for menu in all_menu %}
                        <tr class="{% if mid == menu.pk|safe %} active{% endif %}">
                            <td><a href="?mid={{ menu.pk }}">{{ menu.title }}</a></td>
                            <td><i class="fa {{ menu.icon }}"></i></td>
                            <td><a href="{% url 'rbac:menu_edit' menu.pk %}"> <i class="fa fa-edit"></i> </a>
                                <a href="{% url 'rbac:delete' 'menu' menu.pk %}"> <i class="fa fa-trash-o"></i> </a>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>

            </div>
        </div>

        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-cubes"></i> 权限管理
                    <a style="padding: 2px 7px;margin-top: -2px" href="{% url 'rbac:multi_permissions' %}" class="btn btn-sm btn-primary pull-right"> <i
                            class="fa fa-mail-forward"></i> 批量操作</a>
                    <a style="padding: 2px 7px;margin-top: -2px" href="{% url 'rbac:permission_add' %}" class="btn btn-sm btn-success pull-right"> <i
                            class="fa fa-plus-circle"></i> 新建</a>

                </div>
                <table class="table  table-hover">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>URL</th>
                        <th>URL别名</th>
                        <th>所属菜单</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="permission-area">
                    {% for p_permission in all_permission %}
                        <tr class="root">
                            <td class="title" id="{{ p_permission.id }}"><i
                                    class="fa fa-caret-down"></i> {{ p_permission.title }}</td>
                            <td>{{ p_permission.url }}</td>
                            <td>{{ p_permission.name }}</td>
                            <td>{{ p_permission.menu__title }}</td>
                            <td><a href="{% url 'rbac:permission_edit' p_permission.id %}"> <i class="fa fa-edit"></i> </a>
                                <a href="{% url 'rbac:delete' 'permission' p_permission.id %}"> <i class="fa fa-trash-o"></i> </a>
                            </td>
                        </tr>

                        {% for c_permission in p_permission.children %}
                            <tr pid="{{ p_permission.id }}">
                                <td>{{ c_permission.title }}</td>
                                <td>{{ c_permission.url }}</td>
                                <td>{{ c_permission.name }}</td>
                                <td></td>
                                <td><a href="{% url 'rbac:permission_edit' c_permission.id %}"> <i class="fa fa-edit"></i> </a>
                                    <a href="{% url 'rbac:delete' 'permission' c_permission.id %}"> <i class="fa fa-trash-o"></i> </a>
                                </td>
                            </tr>
                        {% endfor %}



                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>



{% endblock %}


{% block js %}

    <script>
        $('.permission-area tr td.title').click(function () {
            pid = $(this).attr('id');
            caret = $(this).find('i');
            if (caret.hasClass('fa-caret-down')) {
                caret.removeClass('fa-caret-down').addClass('fa-caret-right');
            } else {
                caret.removeClass('fa-caret-right').addClass('fa-caret-down');
            }
            tr = $(this).parent().nextAll("[pid=" + pid + "]");
            tr.toggleClass('hide')

        })

    </script>

{% endblock %}